<template>
	<view class="page">		 
		<view class="body"> 
			<view class="top-header m-b2">
				<view class="top">
					<view class="tabs">
						 
					</view>
					<view class="right">
						<view class="msg">
							<image src="@/static/images/u2.png" mode="widthFix"></image>
							<view class="d"></view>
						</view>
						<view class="add">
							<image src="@/static/images/u1.png" mode="widthFix" @click="showadd=true"></image>
							<view v-if="showadd" class="add-btns a-fadeinR">
								<navigator url="/pages/add/add" hover-class="none" class="btn">添加设备</navigator>
								<navigator url="/pages/add/add" hover-class="none" class="btn">扫一扫</navigator>
								<view class="btn">批量控制</view>
								<view class="btn">自动化</view>
							</view>
						</view>
					</view>
				</view>
				<view class="area-tab">
					<view class="left">
						<view class="m-r2 active">推荐</view>
						<view class="">自定义</view>
					</view>
					<!-- <view class="right"><image src="@/static/images/u5.png" mode="widthFix"></image></view> -->
				</view>	
			</view>	
			
			<view class="label m-b2">已开启</view>	
			<view class="menu-list m-b4">
				<navigator open-type="navigate" url="/" hover-class="none" class="item"> 
					<view class="icon"> </view>
					<!-- <view class="content">
						<view class="name">共享</view>
						<view class="iconfont f-s28">&#xe8d4;</view>
					</view> -->
					<view class="btn">执行</view>	
				</navigator>  
				<navigator open-type="navigate" url="/" hover-class="none" class="item"> 
					<view class="icon"> </view>
					<!-- <view class="content">
						<view class="name">设备耗材</view>
						<view class="iconfont f-s28">&#xe8d4;</view>
					</view> -->
					<view class="btn">执行</view>	
				</navigator>				 
			</view> 
			
			<view class="label m-b2">未开启</view>
			<view v-if="false" class="menu-list m-b4">
				<navigator open-type="navigate" url="/" hover-class="none" class="item"> 
					<view class="icon"> </view>
					<!-- <view class="content">
						<view class="name">共享</view>
						<view class="iconfont f-s28">&#xe8d4;</view>
					</view> -->
					<view class="btn">执行</view>	
				</navigator>  
				<navigator open-type="navigate" url="/" hover-class="none" class="item"> 
					<view class="icon"> </view>
					<!-- <view class="content">
						<view class="name">设备耗材</view>
						<view class="iconfont f-s28">&#xe8d4;</view>
					</view> -->
					<view class="btn">执行</view>	
				</navigator>				 
			</view> 	
			
		</view>		
		<c-nav switchTab="2"></c-nav>
	</view>
</template>

<script> 
	import { 
		uploadImage, 
		uploadToServe, 
	} from '@/common/util.js'
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				userAuth: {},
				showadd:false,
				loadingState: {
					default: true
				},
				list:[],
				keywords:'',
				crop_type:''
			}
		},
		async onLoad() {
			this.askindex();
		},
		async onShow() {
			 
		},
		methods: {			 
			// 获取列表
			askindex:async function(){
				let res=await this.$api.user_api.askindex({				 
					keywords: this.keywords, 
					crop_type: this.crop_type
				})  
				   
				if(res.data.code==0 && res.data.data.list.length>0){
					res.data.data.list.forEach(item=>{
						item.files=item.photos.split(',');
					})
					this.list=this.list.concat(res.data.data.list);
					this.total=res.data.data.count; 
					this.loadingState.loading=true;
					// if(this.list.length==res.data.data.count){
					// 	this.loadingState.default=false;
					// 	this.loadingState.loading=false;
					// 	this.loadingState.stop=true;
					// }
					console.log(this.list)
				} 
				 
			},
			
			search(){
				this.list=[]; 
				this.askindex();
			},
			
			clearKeyword(){
				this.list=[]; 
				this.keywords='';
				this.askindex();
			},
			
			checkPhoto:async function(){ 
				
				// 上传现场照片
				let _this = this;
				 
				uploadImage({
					length: 1,
					sourceType:['album'],
					maxSize: 1, 
					async success(res) {  
						console.log(res)
						// let params_data = {};
						// params_data.status = 0;
						// params_data.url = res.tempFilePaths[0];
						// _this.files.push(params_data); 
						// let token=await _this.$api.user_api.getToken({
						// 	appid:'100002',
						// 	appsecret:'24dcb652ce0043c9a53d90de2468b5b8'
						// }) 
						// uni.showLoading();
						// uploadToServe({
						// 	type:1,
						// 	url: 'https://shibie.honghuoyi.com/user/sb-insert.do',  
						// 	filePath: res.tempFilePaths[0],
						// 	name: 'myfile',
						// 	formData:{
						// 		appid:100002,
						// 		token:token.data.data.token,
						// 		uid:_this.userInfo.id
						// 	}
						// }).then((up_res) => {  
						// 	uni.hideLoading();
						// 	if (up_res.ret == 1000) {	 
						// 		uni.navigateTo({
						// 			url:'/package_shibie/dataList/dataList?type=1'
						// 		})
						// 	}
						// })  
					}
				})
				
			},
			
			checkCamera:async function(){
				// let system = getApp().globalData.systemInfo; 
				 
				uni.navigateTo({
					url:'/package_shibie/camera/camera?type='+this.type
				})
				 
			},
		},
		computed:{
			list_update(){  
				return this.$store.state.answer
			}
		},
		watch:{
			list_update(newer,older){ 
				if(newer!=older){
					this.list=[];
					this.askindex();
				}
			}
		},
		components: { 
		}
	}
</script>

<style lang="less" scoped>
	.page,.body{ 
		position: relative;  
	} 
	.a-fadeinR{
		-webkit-animation:.2s ease-out backwards;
		-moz-animation:.2s ease-out backwards;
		-ms-animation:.2s ease-out backwards;
		animation:.2s ease-out backwards;
		-webkit-animation-name:fadeinR;
		-moz-animation-name:fadeinR;
		-ms-animation-name:fadeinR;
		animation-name:fadeinR
	}
	@keyframes fadeinR{
		0%{
			opacity:0;
			transform:translateX(30px)
		}
		100%{
			opacity:1;
			transform:translateX(0)
		}
	}
	.top-header{
		background: #fff;
		padding-bottom: 10rpx;
	}
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 100rpx 30rpx 0; 
		.tabs{
			display: flex;
			justify-content: space-between;
			position: relative;
			z-index: 100;
			.left{	
				display: flex;
				align-items: center;
				.text{
					font-size: 38rpx;
					font-weight: bold;
				}
				.icon{
					width: 30rpx;
				}
			}		
		}
		.right{
			display: flex;
			margin-right: 150rpx;
			.msg,.add{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90rpx;
				width: 90rpx; 
				image{
					width: 60%;
				}
			}
			.msg{
				.d{
					position: absolute;
					right: 0;
					top: 0;
					width: 20rpx;
					height: 20rpx;
					background: #f00;
					border-radius: 50%;
				}
			}
			.add{
				.add-btns{
					position: absolute; 
					right: 60rpx;
					top: 40rpx;
					z-index: 100;
					width: 200rpx;
					padding: 20rpx 0 0;
					background: rgba(245, 247, 250, 1);
				}
				.btn{
					padding: 20rpx 0;
					margin-bottom: 10rpx;
					background: #fff;
					font-size: 28rpx;
					color: #606266;
					text-align: center;
				}
			}
		}
	}
	.area-tab{
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 30rpx;
		.left{
			display: flex;
			font-size: 46rpx;
			color: #999;
			.active{
				font-weight: bold;
				color: #000;
			}
		}
		.right{
			width: 100rpx;
			image{
				width: 100%;
			}
		}
	}
	.label{
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #999;
	}
	.menu-list {
		@h: 120rpx;
		margin: 0 30rpx;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: @h; 
			background: #fff;
			border-radius: 18rpx;	
			margin-bottom: 20rpx;
			padding: 40rpx;
			.icon {
				display: flex;
				align-items: center;
				width: 60rpx;
				height:60rpx;
				background: #ccc;
				margin-right: 20rpx;
				flex-shrink: 0;
	
				image {
					width: 90%;
				}
			}
			.btn{
				padding: 5rpx 20rpx;
				border: 2rpx solid #eee;
				border-radius: 38rpx;
				font-size:28rpx;
				background: #ccc;
				color: #666;
			}
			.content {
				display: flex;
				justify-content: space-between;
				height: @h;
				line-height: @h;
				padding-right: 10rpx;
				flex-grow: 2;
				border-bottom: 2rpx solid #eee;
	
				.iconfont {
					color: #bbb;
				}
	
				.name {
					flex-grow: 2;
					font-size: 32rpx;
					color: #333;
				}
	
				.link {
					font-size: 32rpx;
					color: #333;
				}
			}
	
		}
	} 
</style>
